<template>
	<view class="container">
		<!-- 商品图片轮播 -->
		<view class="swiper-container" v-if="goodsImages.length > 0">
			<swiper class="goods-swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500"
				circular @change="onSwiperChange">
				<swiper-item v-for="(image, index) in goodsImages" :key="index">
					<view class="swiper-item">
						<image class="goods-image" :src="image" mode="aspectFill" @tap="previewImage(index)"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-indicator">
				<text class="indicator-text">{{ currentImageIndex + 1 }}/{{ goodsImages.length }}</text>
			</view>
		</view>

		<!-- 商品基本信息 -->
		<view class="goods-basic-info">
			<view class="price-section">
				<view class="current-price">
					<text class="price-symbol">¥</text>
					<text class="price-value">{{ detail.price || '0.00' }}</text>
				</view>
				<view class="original-price"
					v-if="detail.sku_items && detail.sku_items[0] && detail.sku_items[0].market_price">
					<text class="original-price-text">¥{{ detail.sku_items[0].market_price }}</text>
				</view>
				<view class="sales-count">
					<text class="sales-text">已售{{ detail.sales || 0 }}件</text>
				</view>
			</view>

			<view class="title-section">
				<text class="goods-title">{{ detail.title }}</text>
				<view class="title-tags">
					<text class="tag-item status" :class="detail.status">{{ detail.status_text || '正常' }}</text>
					<text class="tag-item" v-if="detail.is_hot">热销</text>
				</view>
			</view>

			<view class="desc-section" v-if="detail.description">
				<text class="desc-text">{{ detail.description }}</text>
			</view>
		</view>

		<!-- 商品参数 -->
		<view class="params-section">
			<view class="section-header">
				<text class="section-title">商品信息</text>
			</view>
			<view class="params-list">
				<view class="param-item">
					<text class="param-label">产品型号</text>
					<text class="param-value">{{ detail.model || '无型号' }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">商品类目</text>
					<text class="param-value">{{ getCategoryName(detail.category_id) }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">品牌</text>
					<text class="param-value">{{ getBrandName(detail.brand_id) }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">产地</text>
					<text class="param-value">{{ detail.origin || '未知产地' }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">发货地</text>
					<text class="param-value">{{ getAreaName(detail.place_of_shipment) }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">包装</text>
					<text class="param-value">{{ detail.package || '商包' }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">库存类型</text>
					<text class="param-value">{{ detail.stock_text || '' }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">规格类型</text>
					<text class="param-value">{{ detail.specs_text || '' }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">库存数量</text>
					<text class="param-value">{{ getTotalStock() }}件</text>
				</view>
				<view class="param-item">
					<text class="param-label">商品编号</text>
					<text class="param-value">{{ detail.id }}</text>
				</view>
				<view class="param-item">
					<text class="param-label">上架时间</text>
					<text class="param-value">{{ formatTime(detail.createtime) }}</text>
				</view>
			</view>
		</view>

		<!-- SKU信息 -->
		<view class="sku-section" v-if="detail.sku_items && detail.sku_items.length > 0">
			<view class="section-header">
				<text class="section-title">规格信息</text>
			</view>
			<view class="sku-list">
				<view class="sku-item" v-for="(sku, index) in detail.sku_items" :key="sku.id">
					<view class="sku-info">
						<text class="sku-name">{{ sku.difference || '默认' }}</text>
						<text class="sku-sn">编码: {{ sku.sn }}</text>
					</view>
					<view class="sku-detail">
						<view class="sku-price">
							<text class="price-text">¥{{ sku.price }}</text>
							<text class="market-price" v-if="sku.market_price">¥{{ sku.market_price }}</text>
						</view>
						<view class="sku-stock">
							<text class="stock-text">库存: {{ sku.stock }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="detail-section">
			<view class="section-header">
				<text class="section-title">商品详情</text>
			</view>
			<view class="detail-content">
				<!-- 商品描述 -->
				<view class="description" v-if="detail.content">
					<rich-text :nodes="detail.content"></rich-text>
				</view>

				<!-- 商品详情图片 -->
				<view class="detail-images" v-if="detailImages.length > 0">
					<image v-for="(img, index) in detailImages" :key="index" class="detail-image" :src="img"
						mode="widthFix" @tap="previewDetailImage(index)"></image>
				</view>

				<!-- 空详情状态 -->
				<view class="empty-detail" v-else>
					<image class="empty-detail-image" src="/static/images/empty-detail.png" mode="aspectFit"></image>
					<text class="empty-detail-text">暂无商品详情</text>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				detail: {},
				loading: false,
				currentImageIndex: 0,
				goodsImages: [],
				detailImages: [],
				// 模拟数据，实际项目中应该从API获取
				categoryMap: {
					268: '测试类目'
				},
				brandMap: {
					5: '测试品牌'
				},
				areaMap: {
					801: '测试地区'
				}
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.loadData();
			} else {
				this.$wanlshop.msg('参数错误');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			loadData() {
				this.loading = true;
				return uni.$uv.http.get('/supplier/getGoodsDetail', {
					params: {
						goods_id: this.id
					}
				}).then(res => {
					console.log('接口返回:', res);
					if (res.res.code === 1) {
						this.detail = res.res.data;
						this.processGoodsData();
					} else {
						this.$wanlshop.msg(res.res.msg || '获取详情失败');
					}
				}).catch(error => {
					console.log('error', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				}).finally(() => {
					this.loading = false;
				});
			},

			// 处理商品数据
			processGoodsData() {
				// 处理商品图片
				if (this.detail.image) {
					this.goodsImages = [this.detail.image];
				} else {
					this.goodsImages = ['/static/images/default-goods.png'];
				}

				// 处理商品相册
				if (this.detail.images) {
					const images = this.detail.images.split(',');
					this.goodsImages = [...this.goodsImages, ...images];
				}

				// 处理详情图片 - 这里可以根据实际情况调整
				this.detailImages = this.goodsImages.slice(1); // 使用除主图外的其他图片作为详情图
			},

			// 轮播图切换
			onSwiperChange(e) {
				this.currentImageIndex = e.detail.current;
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 预览商品图片
			previewImage(index) {
				uni.previewImage({
					current: this.goodsImages[index],
					urls: this.goodsImages
				});
			},

			// 预览详情图片
			previewDetailImage(index) {
				uni.previewImage({
					current: this.detailImages[index],
					urls: this.detailImages
				});
			},

			// 获取类目名称
			getCategoryName(categoryId) {
				return this.categoryMap[categoryId] || '未知类目';
			},

			// 获取品牌名称
			getBrandName(brandId) {
				return this.brandMap[brandId] || '未知品牌';
			},

			// 获取地区名称
			getAreaName(areaId) {
				return this.areaMap[areaId] || '未知地区';
			},

			// 获取总库存
			getTotalStock() {
				if (!this.detail.sku_items || !Array.isArray(this.detail.sku_items)) {
					return 0;
				}
				return this.detail.sku_items.reduce((total, sku) => total + (parseInt(sku.stock) || 0), 0);
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '未知';
				const date = new Date(timestamp * 1000);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f8f9fa;
	}

	/* 商品图片轮播 */
	.swiper-container {
		position: relative;
		width: 100%;
		height: 750rpx;

		.goods-swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;

				.goods-image {
					width: 100%;
					height: 100%;
					background-color: #f5f5f5;
				}
			}
		}

		.swiper-indicator {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			background: rgba(0, 0, 0, 0.5);
			padding: 8rpx 16rpx;
			border-radius: 20rpx;

			.indicator-text {
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}

	/* 商品基本信息 */
	.goods-basic-info {
		background: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.price-section {
			display: flex;
			align-items: flex-end;
			margin-bottom: 20rpx;

			.current-price {
				display: flex;
				align-items: baseline;

				.price-symbol {
					font-size: 28rpx;
					color: #ff3b30;
					font-weight: bold;
					margin-right: 4rpx;
				}

				.price-value {
					font-size: 48rpx;
					color: #ff3b30;
					font-weight: bold;
					margin-right: 20rpx;
				}
			}

			.original-price {
				.original-price-text {
					font-size: 24rpx;
					color: #999999;
					text-decoration: line-through;
					margin-right: 20rpx;
				}
			}

			.sales-count {
				.sales-text {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.title-section {
			margin-bottom: 20rpx;

			.goods-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				line-height: 1.4;
				margin-bottom: 16rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.title-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 12rpx;

				.tag-item {
					padding: 6rpx 16rpx;
					border-radius: 6rpx;
					font-size: 20rpx;

					&.status {
						background: #f0f0f0;
						color: #666666;

						&.normal {
							background: #f0f9ff;
							color: #1890ff;
						}
					}

					&:not(.status) {
						background: #fff2f0;
						border: 1rpx solid #ff3b30;
						color: #ff3b30;
					}
				}
			}
		}

		.desc-section {
			.desc-text {
				font-size: 26rpx;
				color: #666666;
				line-height: 1.5;
			}
		}
	}

	/* 商品参数 */
	.params-section {
		background: #ffffff;
		margin-bottom: 20rpx;

		.section-header {
			padding: 24rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.params-list {
			padding: 0 30rpx;

			.param-item {
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #f8f8f8;

				&:last-child {
					border-bottom: none;
				}

				.param-label {
					width: 200rpx;
					font-size: 28rpx;
					color: #666666;
					flex-shrink: 0;
				}

				.param-value {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}

	/* SKU信息 */
	.sku-section {
		background: #ffffff;
		margin-bottom: 20rpx;

		.section-header {
			padding: 24rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.sku-list {
			padding: 0 30rpx;

			.sku-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #f8f8f8;

				&:last-child {
					border-bottom: none;
				}

				.sku-info {
					display: flex;
					flex-direction: column;

					.sku-name {
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
						margin-bottom: 8rpx;
					}

					.sku-sn {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.sku-detail {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.sku-price {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.price-text {
							font-size: 28rpx;
							color: #ff3b30;
							font-weight: bold;
							margin-right: 12rpx;
						}

						.market-price {
							font-size: 22rpx;
							color: #999999;
							text-decoration: line-through;
						}
					}

					.sku-stock {
						.stock-text {
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}
		}
	}

	/* 商品详情 */
	.detail-section {
		background: #ffffff;
		margin-bottom: 20rpx;

		.section-header {
			padding: 24rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.detail-content {
			.description {
				padding: 30rpx;
				border-bottom: 1rpx solid #f0f0f0;
			}

			.detail-images {
				.detail-image {
					width: 100%;
					display: block;
				}
			}

			.empty-detail {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 80rpx 0;

				.empty-detail-image {
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 30rpx;
					opacity: 0.5;
				}

				.empty-detail-text {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;

		.loading-text {
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>

<style>
	/* 图标字体样式 */
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/c/font_4503277_hqg1h6l5r6.woff2?t=1712657862438') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-back:before {
		content: "\e61c";
	}
</style>